<template>
	<view class="container">
		<view class="address-bar" style="padding-top: 40rpx">
			{{ currentStartLocation.name }}
			<image src="/static/home/line.png" class="status-line-icon"></image>
			{{ currentEndLocation.name }}
		</view>
		<!-- 筛选组件 -->
		<filter-component @filter="handleFilter"></filter-component>
		<!-- 行程信息 -->
		<view class="day-section-item-warps" v-if="tomorrowTrips.length > 0" v-for="(item, index) in tomorrowTrips" :key="index">
			<!-- <view class="date-header">
        <text class="date">{{ item.startDate || "" }}</text>
      </view> -->
			<view class="trip-header">
				<view class="owners-trip-item-detail">
					<view class="owners-departure-info">
						<view class="time">{{ item.starTime }}</view>
						<view class="specific-time">{{ item.startDate1 }}</view>
					</view>
					<view class="trip-location-info">
						<view>
							<view class="departure">
								{{ item.start.name }}
								<text class="trip-location-distance" v-if="false">
									距离
									<text style="color: #ff7937">0</text>
									km
								</text>
							</view>
							<view class="location">
								<image src="/static/home/arrow-line.png" class="arrow-line-icon" style=""></image>
								<!-- <text class="label">途径：</text>{{item.approach}} -->
							</view>
							<view class="destination">{{ item.end.name }}</view>
						</view>
					</view>
				</view>
				<view class="itinerary-detail-warps">
					<view class="route-info">
						<text>途径：{{ item.approach }}</text>
						<view class="details-to" @click="navigateTo('/pages/home/queryOwners/details/index?id=' + item.id)">
							<text class="details">行程详情</text>
							<image src="/static/personalCenter/details.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="car-info">
						<text>车型：{{ item.brand_model }} {{ item.seats }}座</text>
						<view class="car-type" :class="{ 'car-type-gray': item.user.car_owner_type == 1 }">
							<image v-if="item.user.car_owner_type == 1" class="car-icon" src="/static/home/no-car.png" mode="aspectFill"></image>
							<image v-else class="car-icon" src="/static/home/car.png" mode="aspectFill"></image>
							<text class="car-type-name">{{ item.user.car_owner_type_text }}</text>
						</view>
					</view>
					<view class="car-info">
						<text>备注：{{ item.remark }}</text>
					</view>
					<view class="car-info">
						<text>口碑：</text>
						<image class="zan-icon" src="/static/home/zan.png" mode="aspectFill"></image>
						<text>{{ item.user.good_evaluate }}</text>
						<image class="un-zan-icon" src="/static/home/un-zan.png" mode="aspectFill"></image>
						<text>{{ item.user.bad_evaluate }}</text>
					</view>
				</view>
				<view class="scheduled-seat-warps">
					<view class="scheduled-seat-left">
						<view class="scheduled-num">
							<text class="label">余座</text>
							<text class="value">{{ item.current_seats }}</text>
						</view>
						<view class="scheduled-price">
							<text class="unit">￥</text>
							<text class="price-value">{{ item.unit_price }}</text>
							<text class="each-value">/座</text>
						</view>
					</view>
					<!--  -->
					<view class="scheduled-btn" @click="navigateTo(`/pages/home/queryOwners/scheduledSeat/index?lid=${item.id}`)">预定</view>
				</view>
			</view>
		</view>
		<empty-data v-if="tomorrowTrips.length == 0" defaultText="暂无数据" />
	</view>
</template>
<script>
import FilterComponent from '../../common/filter-component.vue';
import { formatDateTime } from '@/utils/dateTimeFormatter.js';
import moment from 'moment';
export default {
	components: { FilterComponent },
	data() {
		return {
			tomorrowTrips: [], // 未使用优惠券数据
			currentStartLocation: {},
			currentEndLocation: {},
			startTime: '',
			seats: '',
			type: 2,
			page: 1,
			size: 20
		};
	},
	onShow() {},
	onLoad(option) {
		this.currentStartLocation = {
			id: option.sid,
			name: option.sName
		};
		this.currentEndLocation = {
			id: option.eid,
			name: option.eName
		};

		this.type = option.type === 'city' ? 2 : 1;
		this.getData();
	},
	methods: {
		handleFilter(filterParams) {
			let obj = {
				all: '',
				today: moment().format('YYYY-MM-DD'),
				tomorrow: moment().add(1, 'days').format('YYYY-MM-DD'),
				after: moment().add(2, 'days').format('YYYY-MM-DD')
			};
			this.startTime = obj[filterParams.time];
			this.seats = filterParams.seats;
			console.log('筛选条件:', filterParams.time, filterParams.seats, obj[filterParams.time]);
			this.getData();
		},
		async getData() {
			let params = {
				page: this.page,
				size: this.size,
				start_id: this.currentStartLocation.id,
				end_id: this.currentEndLocation.id,
				start_time: this.startTime,
				seats: this.seats,
				type: this.type // 类型：1=城乡线路，2=城际线路
			};
			let userInfoData = uni.getStorageSync('userInfo');
			if (userInfoData.id) {
				params.uid = userInfoData.id;
			}
			try {
				const data = await this.$http.get('/h5/line/index', params);

				this.tomorrowTrips = data.data.list;
				if (this.tomorrowTrips.length > 0) {
					this.tomorrowTrips.forEach((ele) => {
						ele.startDate = formatDateTime(ele.start_time);
						ele.startDate1 = formatDateTime(ele.start_time, true, true);
					});
				}
			} catch (error) {}
		},
		handleBooking() {
			uni.showToast({
				title: '预定功能开发中',
				icon: 'none'
			});
		},
		// 导航到指定页面
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>
<style lang="scss" scoped>
/* 行程头部样式 */
.trip-header {
	background-color: #fff;
	border-radius: 16rpx;
	/* padding: 36rpx 0rpx 50rpx 20rpx; */
	// margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	margin-top: 20rpx;
}

.arrow-line-icon {
	width: 8rpx;
	height: 30rpx;
	position: absolute;
	left: 6rpx;
	top: -12rpx;
}

.owners-trip-item-detail {
	padding: 34rpx 0 30rpx 32rpx;
	display: flex;
}

.owners-departure-info {
	padding-right: 30rpx;
	text-align: center;
}

.owners-departure-info .time {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 700;
	font-size: 32rpx;
	color: #ff7937;
}

.owners-departure-info .specific-time {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	font-weight: 500;
	color: #0b1f20;
	line-height: 28rpx;
	white-space: pre-line;
	line-height: 36rpx;
}

.trip-location-distance {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #999999;
	line-height: 36rpx;
	font-style: normal;
	font-weight: normal;
	padding-left: 6rpx;
}

.trip-location-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.time {
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	margin-bottom: 20rpx;
}

.time .start-label {
	display: inline-block;
	width: 88rpx;
	height: 40rpx;
	background: #ff7937;
	border-radius: 32rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 40rpx;
	text-align: center;
	margin-right: 12rpx;
}

.departure,
.destination {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #0b1f20;
	line-height: 42rpx;
	position: relative;
	padding-left: 36rpx;
}

.departure::before {
	content: '';
	position: absolute;
	bottom: 12rpx;
	left: 0;
	width: 16rpx;
	height: 16rpx;
	background: #00cfab;
	border-radius: 50%;
}

.destination::before {
	content: '';
	position: absolute;
	bottom: 12rpx;
	left: 0;
	width: 16rpx;
	height: 16rpx;
	background: #ff7937;
	border-radius: 50%;
}

.location,
.contact {
	font-size: 28rpx;
	color: #666;
	margin-top: 10rpx;
	margin-bottom: 12rpx;
	position: relative;
	padding-left: 34rpx;
}

.location .label,
.contact .label {
	color: #999;
}

.contact .value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 48rpx;
}

/* Header styles */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}

.location {
	display: flex;
	flex-direction: column;
}

.city {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.district {
	font-size: 28rpx;
	color: #666;
	margin-top: 5rpx;
}

.departure-time {
	font-size: 28rpx;
	color: #666;
}

.seats-available {
	color: #ff5a5f;
	margin-left: 10rpx;
}

.address-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;

	.status-line-icon {
		width: 104rpx;
		height: 7rpx;
	}
}

/* Day section styles */

.day-section-item-warps {
	margin-top: 20rpx;
	padding: 20rpx 26rpx;
}

.day-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
}

.date-header {
	display: flex;
	align-items: center;
	padding: 36rpx 0;
}

.date {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 28rpx;
}

.day {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	line-height: 28rpx;
	margin-left: 22rpx;
}

.no-rides {
	text-align: center;
	/* padding: 40rpx 0; */
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #999999;
	line-height: 28rpx;
	padding-bottom: 48rpx;
}

.no-data-icon {
	width: 400rpx;
	height: 400rpx;
}

.itinerary-detail-warps {
	background: #f5f5f6;
	border-radius: 16rpx;
	padding: 22rpx 28rpx 22rpx 20rpx;
	margin-bottom: 20rpx;
	margin: 0 8rpx 20rpx 8rpx;
}

.scheduled-seat-warps {
	height: 80rpx;
	background: rgba(255, 121, 55, 0.05);
	border-radius: 16rpx;
	margin: 0 8rpx 0rpx 8rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6rpx 6rpx 6rpx 20rpx;
}

.scheduled-seat-left {
	display: flex;
	align-items: center;
}

.scheduled-num {
	padding-right: 54rpx;
}

.scheduled-num .label {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #666666;
	line-height: 36rpx;
	padding-right: 26rpx;
}

.scheduled-num .value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #ff7937;
	line-height: 48rpx;
}

.scheduled-price .unit {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #ff7937;
	line-height: 36rpx;
}

.scheduled-price .price-value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 700;
	font-size: 36rpx;
	color: #ff7937;
	line-height: 36rpx;
}

.scheduled-price .each-value {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #666666;
	line-height: 36rpx;
}

.scheduled-btn {
	width: 176rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	border-radius: 16rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #ffffff;
	letter-spacing: 1px;
	text-align: center;
}

.route-info {
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.route-info image {
	width: 28rpx;
	height: 28rpx;
}

.details-to {
	display: flex;
	align-items: center;
}

.car-type {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88rpx;
	height: 32rpx;
	border-radius: 4rpx;
	border: 1rpx solid rgba(255, 121, 55, 0.5);
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 20rpx;
	color: #ff7937;
	margin-left: 10rpx;
}

.car-type-gray {
	color: #999999;
	border: 1rpx solid #999999;
}

.car-icon {
	width: 19rpx;
	height: 16rpx;
	padding-right: 4rpx;
}

.details {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #999999;
}

.car-info {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;

	.zan-icon,
	.un-zan-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	.un-zan-icon {
		margin-left: 30rpx;
	}
}

.that-day-section-item-warps {
	padding-top: 46rpx;
}
</style>
